{% extends 'basic_app/master.html' %}
{% block link_script %}
    {#    <script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>#}
    <script src="/static/echarts.min.js"></script>
{% endblock %}
{% block style %}
    <style>
        #chart-container {
            position: relative;
            height: 70vh;
            overflow: hidden;
        }
    </style>
{% endblock %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>Basic</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">overview</h3>
        <div id="chart-container" ins_active_info="{{ ins_active_info }}" ins_inactive_info="{{ ins_inactive_info }}"
             ins_locked_info="{{ ins_locked_info }}" ins_total_info="{{ ins_total_info }}"></div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header"></h3>
        <span>机房位置分布</span>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header"></h3>
        <span>计划任务执行情况</span>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header"></h3>
        <span>机房位置分布</span>
    </div>

{% endblock %}
{% block script %}
    <script>
        var ins_active_info = document.getElementById("chart-container").getAttribute("ins_active_info")
        var ins_inactive_info = document.getElementById("chart-container").getAttribute("ins_inactive_info")
        var ins_locked_info = document.getElementById("chart-container").getAttribute("ins_locked_info")
        var ins_total_info = document.getElementById("chart-container").getAttribute("ins_total_info")
        var dom = document.getElementById('chart-container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var ROOT_PATH = '/static/img';
        var option;

        const weatherIcons = {
            Oracle: ROOT_PATH + '/oracle_logo.png',
            Mysql: ROOT_PATH + '/database.jpg',
            Other: ROOT_PATH + '/other.jpeg'
        };
        const seriesLabel = {
            show: true
        };
        option = {
            title: {
                text: '数据库实例概览'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['active', 'inactive', 'locked', 'total']
            },
            grid: {
                left: 100
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                name: '个数',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data: ['Oracle', 'Mysql', 'Other'],
                axisLabel: {
                    formatter: function (value) {
                        return '{' + value + '| }\n{value|' + value + '}';
                    },
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 30,
                            align: 'center'
                        },
                        Oracle: {
                            height: 40,
                            align: 'center',
                            backgroundColor: {
                                image: weatherIcons.Oracle
                            }
                        },
                        Mysql: {
                            height: 40,
                            align: 'center',
                            backgroundColor: {
                                image: weatherIcons.Mysql
                            }
                        },
                        Other: {
                            height: 40,
                            align: 'center',
                            backgroundColor: {
                                image: weatherIcons.Other
                            }
                        }
                    }
                }
            },
            series: [
                {
                    name: 'active',
                    type: 'bar',
                    data: JSON.parse(ins_active_info),
                    label: seriesLabel,
                    markPoint: {
                        symbolSize: 1,
                        symbolOffset: [0, '50%'],
                        label: {
                            formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                            backgroundColor: 'rgb(242,242,242)',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            padding: [4, 10],
                            lineHeight: 13,
                            // shadowBlur: 5,
                            // shadowColor: '#000',
                            // shadowOffsetX: 0,
                            // shadowOffsetY: 1,
                            position: 'right',
                            distance: 20,
                            rich: {
                                a: {
                                    align: 'center',
                                    color: '#fff',
                                    fontSize: 9,
                                    textShadowBlur: 2,
                                    textShadowColor: '#000',
                                    textShadowOffsetX: 0,
                                    textShadowOffsetY: 1,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                },
                                b: {
                                    color: '#333'
                                },
                                c: {
                                    color: '#ff8811',
                                    textBorderColor: '#000',
                                    textBorderWidth: 1,
                                    fontSize: 22
                                }
                            }
                        },
                        {#data: [#}
                        {#    {type: 'max', name: 'max days: '},#}
                        {#    {type: 'min', name: 'min days: '}#}
                        {#]#}
                    }
                },
                {
                    name: 'inactive',
                    type: 'bar',
                    label: seriesLabel,
                    data: JSON.parse(ins_inactive_info)
                }, {
                    name: 'locked',
                    type: 'bar',
                    label: seriesLabel,
                    data: JSON.parse(ins_locked_info)
                }
                ,
                {
                    name: 'total',
                    type: 'bar',
                    label: seriesLabel,
                    data: JSON.parse(ins_total_info)
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    </script>
{% endblock %}